<script setup lang="ts">
import { onActivated, onDeactivated } from 'vue'
import { ref } from "vue";
import { useRouter } from "vue-router";
import useAppStore from '@/pinia'
const app = useAppStore()
import { singleModeList } from "@/utils/game";
import { i18n } from '@/utils/i18n'

const modeList = ref(singleModeList())
const initMode = () => {
  modeList.value = modeList.value.map((mode: any) => {
    mode.fold = true // 默认折叠
    if (!mode.child) mode.child = []
    return mode
  })
}
initMode()

const router = useRouter()

const selectMode = (mode: any) => {
  if (mode.child.length) {
    app.playSound('audio1')
    modeList.value = modeList.value.map(item => {
      if (item.eName == mode.eName) item.fold = !item.fold
      else item.fold = true
      return item
    })
  }
  else toGame(mode.id)
}

const getDisplayName = (mode: any) => {
  return i18n.global.locale === 'zn' ? mode.name : mode.eName
}

const toGame = (id: string) => {
  app.playSound('audio5')
  router.replace({
    path: `/game`,
    query: {
      mode: id,
      type: 'single'
    }
  })
}

const toIndex = () => {
  app.playSound('audio3')
  router.replace({
    path: `/`
  })
}

onActivated(() => {
  app.playBgm('index')
  initMode()
})

onDeactivated(() => {

})

</script>

<template>
  <div class="modeIndex">
    <div class="back flex items-center justify-center" @click="toIndex">BACK</div>
    <div ref="listEl" class="list h-full w-full flex flex-col items-end overflow-auto">
      <div v-for="(mode, index) in modeList" :key="index" class="modeItem" @click="selectMode(mode)"
        :class="{ selected: !mode.fold }"
        :style="{ marginBottom: !mode.fold ? (mode.child.length * 20 + 'vh') : '2vh' }">
        <div class="title flex items-center">{{ getDisplayName(mode) }}</div>
        <!-- 子模式展开面板 -->
        <div v-if="mode.child" class="childList" :class="{ show: !mode.fold }">
          <div v-for="(child, index) in mode.child" :key="index" class="childItem" @click="toGame(child.id)">
            {{ getDisplayName(child) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.modeIndex {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 30vmin;
    border-right: 1px solid rgba(111, 155, 222, 0.1);
    color: hsl(0, 0%, 80%);
    font-size: 5vmin;
    cursor: pointer;
    border-radius: 1.5vmin;
    letter-spacing: 0.5vmin;
    transition: all 0.3s;
    z-index: 2;

    &:hover {
      color: #fff;
      border-right: 1px solid rgba(111, 155, 222, 0.4);
      max-width: 40vmin;
      background-color: rgba(111, 155, 222, 0.3);
      box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.4);
      letter-spacing: 4vmin;
    }
  }

  .list {
    padding: 10vmin 0;
    z-index: 1;

    .modeItem {
      width: 100%;
      height: 20vh;
      max-width: 75%;
      padding-left: 10vmin;
      flex-shrink: 0;
      font-size: 6vmin;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 1.5vmin;
      letter-spacing: 1vmin;
      color: hsl(0, 0%, 80%);
      box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.2);
      border: 1px solid rgba(111, 155, 222, 0.3);

      &.selected {
        transform: scale(1.05) translateY(-3%);
        max-width: 80%;
        background-color: rgba(111, 155, 222, 0.4);
        box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.8);
        letter-spacing: 4vmin;
      }

      .title {
        height: 20vh;
      }
    }

    .childList {
      max-height: 0;
      overflow: hidden;
      transition: all 0.3s;

      &.show {
        max-height: max-content;
      }

      .childItem {
        width: 100%;
        height: 15vh;
        display: flex;
        align-items: center;
        padding: 0 10vmin;
        flex-shrink: 0;
        font-size: 4vmin;
        margin-top: 3vh;
        cursor: pointer;
        transition: all 0.3s;
        border-radius: 1.5vmin;
        letter-spacing: 1vmin;
        color: hsl(0, 0%, 80%);
        box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.2);
        border: 1px solid rgba(111, 155, 222, 0.3);

        &:hover {
          background-color: rgba(111, 155, 222, 0.5);
          box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.8);
          letter-spacing: 4vmin;
        }
      }
    }

    .modeItem:last-child {
      margin-bottom: 0;
    }
  }

}
</style>
